<script setup lang="ts">
import { ref } from 'vue'
import { Config } from '@icon-park/vue-next'
import { Key, TreeOptions } from '@biui/component/tree'

function createData(leval: number = 4, parentKey = 'a') {
  if (!leval) return []
  const arr = new Array(14 - leval).fill(0)
  const b = arr.map((_, index: number) => {
    const key = parentKey + leval + index
    return {
      key,
      label: createLabel(leval),
      children: createData(leval - 1)
    }
  }) as TreeOptions[]
  return b
}

function createLabel(leval: number): string {
  if (leval === 4) return '道生一'
  if (leval === 3) return '一生二'
  if (leval === 2) return '二生三'
  if (leval === 1) return '三生万物'
  return ''
}

function createDataLoad() {
  return [
    {
      label: nextLabel(),
      key: 1,
      isLeaf: false
    },
    {
      label: nextLabel(),
      key: 2,
      isLeaf: false
    }
  ]
}

function nextLabel(currentLable?: string | number): string {
  if (!currentLable) return 'Out of Tao,One is born'
  if (currentLable == 'Out of Tao,One is born') return 'Out of One,Two'
  if (currentLable == 'Out of One,Two') return 'Out of One,Three'
  if (currentLable == 'Out of One,Three') {
    return 'Out of Three,the created universe'
  }
  if (currentLable == 'Out of Three,the created universe') {
    return 'Out of Tao,One is born'
  }
  return ''
}

// createData()

const data = createData()
// 异步加载
// const oladData = createDataLoad()

// 异步加载点击事件
function handlerLoad(node: TreeOptions) {
  // 内部需要将展开的节点传递给我
  // 根据节点的key来判断数据是什么
  return new Promise<TreeOptions[]>(reslove => {
    setTimeout(() => {
      // 根据节点的信息，获取新的节点
      reslove([
        // 这个数据会作为当前展开的node的children属性
        {
          label: nextLabel(node.label),
          key: node.key + nextLabel(node.label),
          isLeaf: false
        }
      ])
    }, 1000)
  })
}

const treeSelecKeysRef = ref<Key[]>([])
const displayData = [
  {
    label: '道生一',
    key: 'a40',
    children: []
  },
  {
    label: '道生一',
    key: 'a50',
    disabled: true,
    children: [
      {
        label: '道生一',
        key: 'a51',
        children: []
      },
      {
        label: '道生一',
        key: 'a52',
        children: []
      }
    ]
  }
]

const checkbox = ref(true)

function handlerChange(value: boolean) {
  console.log(value)
}

const dateRef = ref(new Date())
</script>

<template>
  <b-icon color="red" :size="20">
    <Config></Config>
  </b-icon>

  <div>
    {{ treeSelecKeysRef }}

    <b-tree v-model:selected-keys="treeSelecKeysRef" :checkable="true" :checked-keys="['a40', 'a41']" multiple selectable
      :data="data">
      <template #default="{ node }">
        {{ node.key }}--{{ node.label }}
      </template>
    </b-tree>
  </div>

  <div>
    <b-checkbox v-model="checkbox" @change="handlerChange">复选框</b-checkbox>
  </div>

  <div>
    <h1>{{ dateRef }}</h1>
    <b-calendar v-model="dateRef">
      <template #header="{ data }">
        <p> {{ data.title }}</p>
        <button @click="data.selectFn('prev-year')">上一年</button>
        <button @click="data.selectFn('prev-month')">上个月</button>
        <button @click="data.selectFn('tody')">今天</button>
        <button @click="data.selectFn('next-month')">下个月</button>
        <button @click="data.selectFn('next-year')">下一年</button>
      </template>
    </b-calendar>
  </div>
</template>

<style scoped></style>
